<template>
  <div class="home">
    <div class="weather-bar">
      <div id="he-plugin-standard"></div>
      <el-card class="box-card">
        <p v-if="!homeInfo.username">XXX,欢迎回来</p>
        <p v-else>{{ homeInfo.username }},欢迎回来</p>
        <p>今天是{{ date }}</p>
      </el-card>
    </div>
    <div class="user-info-bar">
      <!-- 用户注册 -->
      <el-card class="box-card">
        <p class="title"><span>平台注册人数</span></p>
        <p class="number">{{ homeInfo.regCount }}</p>
      </el-card>
      <el-card class="box-card">
        <p class="title"><span>留言条数</span></p>
        <p class="number">{{ messageCount }}</p>
      </el-card>
      <!-- 用户留言 -->
      <el-card class="box-card" style="margin-right:0px">
        <p class="title"><span>留言板</span></p>
        <div class="scroll-box">
          <vue-seamless-scroll :data="listData" :class-option="optionStep" class="seamless-warp">
            <ul class="item">
              <li v-for="item in listData">
                <p>{{ item.username }}:</p>
                <span>{{ item.content }}</span>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </el-card>
    </div>
    <el-card class="echarts-card">
      <div style="display: flex;flex-direction: row-reverse;">
        <el-date-picker v-model="dateValue" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" value-format="yyyy-MM-dd" @change="changeDate" style="margin-right: 30px;" />
      </div>
      <div id="leave" style="width:1100px;height:300px"></div>
    </el-card>
  </div>
</template>
  

<script>
import { getHomeInfo, message, messageCharts } from '@/api/home'
import { mapGetters } from 'vuex'
const changeWeekFormat = require('@/utils/changeWeekFormat')
import vueSeamlessScroll from 'vue-seamless-scroll'
import * as echarts from 'echarts'
export default {
  components: { vueSeamlessScroll },
  name: 'Home',
  data() {
    return {
      // 首页数据
      homeInfo: {},
      //滚动
      listData: [],
      date: '',
      day: '',
      week: '',
      messageCount: 0,
      queryDate: {
        startTime: '',
        endTime: '',
      },
      dateValue: [],
      echartsDate: [],
      echartsCount: [],
    }
  },
  computed: {
    optionStep() {
      return {
        step: 1,
        hoverStop: true,
        limitMoveNum: 2,
      }
    },
  },
  mounted() {
    this.getList()
  },
  created() {
    // 天气
    window.WIDGET = {
      CONFIG: {
        layout: '1',
        width: '840',
        height: '200',
        background: '1',
        dataColor: 'FFFFFF',
        borderRadius: '5',
        key: '7ea6902e09a742fe97d4e2e81e1d7529',
      },
    }
      ; (function (d) {
        var c = d.createElement('link')
        c.rel = 'stylesheet'
        // c.href = '../../static/css/he-simple.css'
        c.href =
          'https://widget.heweather.net/simple/static/css/he-simple.css?v=1.4.0'
        var s = d.createElement('script')
        // s.src = '../../static/js/he-simple.js'
        s.src =
          'https://widget.qweather.net/standard/static/js/he-standard-common.js?v=2.0'
        var sn = d.getElementsByTagName('script')[0]
        sn.parentNode.insertBefore(c, sn)
        sn.parentNode.insertBefore(s, sn)
      })(document)
  },
  methods: {
    ...mapGetters(['getUserInfo']),
    async getList() {
      this.getHomeInfo()
      this.getMessage()
      this.getEcharts()
    },
    async getHomeInfo() {
      const res = await getHomeInfo()
      this.homeInfo = res.data
      this.homeInfo.username = this.getUserInfo().username
      this.day = this.dayjs().format('YYYY-MM-DD')
      this.week = this.dayjs().day()
      this.week = changeWeekFormat.changeWeekFormat(this.week)
      this.date = this.day + ' 星期' + this.week
    },

    async getMessage() {
      const res = await message()
      this.listData = res.data.messageData
      this.messageCount = res.data.total
      // res.data.messageData.forEach((item) => {
      //   this.listData.push({
      //     title: item.username,
      //     data: item.content,
      //   })
      // })
    },
    async getEcharts() {
      this.queryDate.endTime = this.dayjs().format('YYYY-MM-DD')
      this.queryDate.startTime = this.dayjs(this.queryDate.endTime)
        .subtract(10, 'day')
        .format('YYYY-MM-DD')
      const res = await messageCharts(this.queryDate)
      if (res.status === 0) {
        this.echartsDate = res.data.date
        this.echartsCount = res.data.count
        this.initEcharts()
      }
    },
    async changeDate() {
      this.queryDate.startTime = this.dateValue[0]
      this.queryDate.endTime = this.dateValue[1]
      console.log(this.queryDate)
      const res = await messageCharts(this.queryDate)
      if (res.status === 0) {
        this.echartsDate = res.data.date
        this.echartsCount = res.data.count
        this.$message.success(res.message)
        this.initEcharts()
      }
    },
    initEcharts() {
      var myChart = echarts.init(document.getElementById('leave'))
      const option = {
        title: {
          text: '留言柱状图',
          left: 'center',
        },
        tooltip: {},
        xAxis: {
          data: this.echartsDate,
        },
        yAxis: {
          // Y轴刻度间隔已1为单位作为1格
          interval: 1
        },
        series: [
          {
            name: '条数',
            type: 'line',
            smooth: 0.5,
            lineStyle: {
              color: '#5470C6',
              width: 4
            },
            data: this.echartsCount,
          },
        ],
      }

      option && myChart.setOption(option)
    },
  },
}
</script>
  
<style lang="scss" scoped>
.home {
  .weather-bar {
    display: flex;
    margin-bottom: 20px;

    .box-card {
      width: 300px;
      margin-left: 20px;

      p {
        margin-bottom: 30px;
        font-weight: 500;
        font-size: 19px;
        text-align: center;
      }
    }
  }

  .user-info-bar {
    display: flex;
    margin-bottom: 20px;

    .box-card {
      width: 373px;
      height: 260px;
      margin-right: 20px;

      .title {
        font-weight: 500;
        font-size: 19px;
        text-align: center;

        span {
          width: 204px;
          display: inline-block;
          height: 50px;
          border-bottom: 1px solid #ddd;
        }
      }

      .number {
        font-weight: 600;
        font-size: 40px;
        text-align: center;
      }

      .scroll-box {
        margin: 0 30px;
      }
    }
  }

  .echarts-card {
    height: 330px;
  }

  .seamless-warp {
    height: 229px;
    overflow: hidden;

    p {
      font-size: 20px;
    }

    span {
      font-size: 15px;
    }
  }
}
</style>